<template>
  <div class="answer-interface-container">
    <el-card class="question-list">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-question"></i> 问题列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="fetchQuestions">
          <i class="el-icon-refresh"></i> 刷新
        </el-button>
      </div>
      <div class="article-list">
        <el-row :gutter="20">
          <el-col :span="24" v-for="(question, index) in questions" :key="index" class="article-card">
            <el-card shadow="hover">
              <div class="blog-box">
                <div style="flex: 1; width: 0;">
                  <div class="blog-title" @click="$router.push('/front/questions/' + question.qid)">{{question.title}}</div>
                  <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">{{question.description}}</div>
                  <div style="display: flex;">
                    <div style="flex: 1; font-size: 13px;">
                      <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">{{question.author}}</i></span>
                    </div>
                    <div style="width: fit-content; margin-right: 10px;">
                      <el-tag >{{ question.tag }}</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>


      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalQuestions">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      questions: [
        {
          qid: 1,
          title: '什么时候让你突然感觉自己是活着的？',
          description: '人或多或少浑浑噩噩，但是总有时候会让你觉得自己的存在是有意思的，请讲一讲你的意义',
          author: 'Azraelkaxi',
          tag: '哲学'
        },
      ],
      loading: false,
      dialogVisible: false,
      selectedQuestion: [{
        title: '',
        description: '',
        tags: '',
      },],
      answerForm: {
        content: ''
      },
      answerRules: {
        content: [
          { required: true, message: '请输入回答内容', trigger: 'blur' },
          { min: 10, max: 1000, message: '长度在 10 到 1000 个字符', trigger: 'blur' }
        ]
      },
      submitting: false,
      currentPage: 1,
      pageSize: 10,
      totalQuestions: 0
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
      this.fetchQuestions();
    }
  },
  methods: {
    fetchQuestions() {
      this.loading = true;
      axios.get('/api/question/get-question', {
        headers: { 'token': this.token },
      })
          .then(response => {
            this.questions = response.data.data;
            this.totalQuestions = response.data.total;
          })
          .catch(error => {
            console.error('Error fetching questions:', error);
            this.$message.error('获取问题列表失败，请稍后重试');
          })
          .finally(() => {
            this.loading = false;
          });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchQuestions();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchQuestions();
    }
  },
  filters: {
    truncate(text, length, clamp) {
      clamp = clamp || '...';
      return text.length > length ? text.slice(0, length) + clamp : text;
    },
    formatDate(date) {
      return new Date(date).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  }
};
</script>

<style scoped>
.answer-interface-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #f0f2f5;
}

.question-list {
  width: 100%;
  max-width: 1000px;
  background-color: #ffffff;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.question-details {
  margin-bottom: 20px;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
}

.question-tags {
  margin-top: 10px;
}

.answer-form {
  margin-top: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.el-dialog__body {
  padding-top: 10px;
}

.question-title {
  color: #409EFF;
  cursor: pointer;
}

.question-title:hover {
  text-decoration: underline;
}

.pagination-container {
  text-align: center;
  margin-top: 20px;
}

.answer-dialog >>> .el-dialog__header {
  background-color: #409EFF;
  padding: 15px 20px;
}

.answer-dialog >>> .el-dialog__title {
  color: #ffffff;
  font-weight: bold;
}

.answer-dialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}

.el-tag {
  margin-bottom: 5px;
}

.article-list {
  padding: 20px;
}
.article-card {
  margin-bottom: 10px;
}

.image-container img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}
.pagination {
  text-align: center;
  margin-top: 20px;
}
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.blog-box{
  display: flex;
  grid-gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #666666;
}
.blog-box:first-child{
  padding-top: 0;
}
.blog-title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}
.blog-title:hover{
  color: #2a60c9;
}
</style>